<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">我只是被隐藏,父元素.removeChild(子元素)是真删</div>
  <ul>
    <li>
      <ul>
        <li>1-1</li>
        <li>1-2</li>
      </ul>
    </li>
    <li>没用了</li>
    <li>还有用</li>
  </ul>
  <script>
    // 若一个节点在页面中已不需要时.可以删除它
    // 在javascript原生dom操作中.要删除元素必须通过-->'父元素删除'
    // 语法:父元素.removeChild(要删除的元素)
    // -->如果不存在父子关系则删除不成功
    // -->删除节点和隐藏节点(display: none)有区别的:隐藏节点还是存在的,但是删除,则是从html中删除节点

    const ul = document.querySelector('ul')
    // 删除节点  父元素.removeChild(子元素)
    ul.removeChild(ul.children[0])
    ul.removeChild(ul.children[0])  // 删完children[0]剩下第一个是"没用了",想删掉这个还得用children[0]
  </script>
</body>

</html>